<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Spring-Mass System</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style setup ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.lineCap = 'round';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // --- Coordinates and dimensions ---
    const centerX = 200;
    const baseY = 420;
    const baseWidth = 200;

    const plateWidth = 160;
    const plateHeight = 10;
    const plateTopY = 280;
    const plateBottomY = plateTopY + plateHeight;
    const plateX = centerX - plateWidth / 2;

    const springTopY = plateBottomY;
    const springCoils = 6; // Number of loops
    const springAmplitude = 12;

    const blockSide = 40;
    const blockTopY = 130;
    const blockX = centerX + 20;
    const blockBottomY = blockTopY + blockSide;

    const hIndicatorX = 100;
    // The h indicator line in the original starts slightly above the block.
    const hIndicatorTopY = 100;
    const hIndicatorBottomY = plateTopY;

    // --- Drawing functions ---

    // Function to draw a coiled spring, visually similar to the original image.
    function drawCoiledSpring(ctx, x, y_start, y_end, coils, radius) {
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        const height = y_start - y_end;
        const totalSegments = coils + 0.5; // To account for connection lines
        const segmentHeight = height / totalSegments;

        let currentY = y_start;
        // Start with a small vertical line
        ctx.lineTo(x, currentY - segmentHeight * 0.25);
        currentY -= segmentHeight * 0.25;

        for (let i = 0; i < coils; i++) {
            // Draw a semicircle on the left
            ctx.arc(x - radius, currentY - segmentHeight / 2, radius, Math.PI / 2, -Math.PI / 2, true);
            currentY -= segmentHeight;
        }

        // Connect to the plate
        ctx.lineTo(x, y_end);
        ctx.stroke();
    }
    
    // --- Main Drawing ---

    // 1. Draw Base
    ctx.beginPath();
    ctx.moveTo(centerX - baseWidth / 2, baseY);
    ctx.lineTo(centerX + baseWidth / 2, baseY);
    ctx.stroke();

    // 2. Draw Spring
    drawCoiledSpring(ctx, centerX, baseY, springTopY, 6, 12);
    
    // Label k
    ctx.font = "italic 20px Arial";
    ctx.fillText("k", centerX + 20, baseY - (baseY - springTopY) / 2);

    // 3. Draw Plate m1
    ctx.beginPath();
    ctx.rect(plateX, plateTopY, plateWidth, plateHeight);
    ctx.stroke();

    // Label m1
    ctx.font = "italic 20px Arial";
    ctx.fillText("m", plateX + plateWidth + 10, plateTopY + plateHeight / 2 + 5);
    ctx.font = "italic 14px Arial";
    ctx.fillText("1", plateX + plateWidth + 23, plateTopY + plateHeight / 2 + 11);

    // 4. Draw Block m2
    ctx.beginPath();
    ctx.rect(blockX, blockTopY, blockSide, blockSide);
    ctx.stroke();

    // Label m2
    ctx.font = "italic 20px Arial";
    ctx.fillText("m", blockX + blockSide + 10, blockTopY + blockSide / 2 + 5);
    ctx.font = "italic 14px Arial";
    ctx.fillText("2", blockX + blockSide + 23, blockTopY + blockSide / 2 + 11);
    
    // 5. Draw distance indicator h
    ctx.beginPath();
    // Top horizontal bar
    ctx.moveTo(hIndicatorX - 20, hIndicatorTopY);
    ctx.lineTo(hIndicatorX + 20, hIndicatorTopY);
    // Vertical line
    ctx.moveTo(hIndicatorX, hIndicatorTopY);
    ctx.lineTo(hIndicatorX, hIndicatorBottomY);
    // Arrowhead
    const arrowSize = 8;
    ctx.moveTo(hIndicatorX, hIndicatorBottomY);
    ctx.lineTo(hIndicatorX - arrowSize, hIndicatorBottomY - arrowSize);
    ctx.moveTo(hIndicatorX, hIndicatorBottomY);
    ctx.lineTo(hIndicatorX + arrowSize, hIndicatorBottomY - arrowSize);
    ctx.stroke();

    // Label h
    ctx.font = "italic 20px Arial";
    ctx.fillText("h", hIndicatorX - 35, hIndicatorTopY + (hIndicatorBottomY - hIndicatorTopY) / 2);

    // 6. Draw Chinese caption
    ctx.font = "20px 'SimSun', '宋体'";
    ctx.textAlign = 'center';
    ctx.fillText("习题 2-38 图", centerX, 480);
</script>
</body>
</html>